<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商品列表-商品新增</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_l8m63i5283.css" />
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_1389799_93ajzxuu1cc.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="js/layer/mobile/need/layer.css" />
		<link rel="stylesheet" href="css/pic.css" />
		<link rel="stylesheet" href="css/caiStyle.css" />
		<link rel="stylesheet" href="css/dingdan.css" />
	</head>
	<body>
		<div class="container-fluid bg-white mB100 gs-box1">
			<!-- 基础信息 -->
			<div class="advanced-search-model model">
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="mui-col-xs-12 height50 pT10">
								<div class="title mui-col-xs-1">基础信息</div>
								<div class="mui-col-xs-8">
									<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="立即上架" title="立即上架">
									<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="套餐商品" title="套餐商品">
								</div>
							</div>

							<div class="form-box mui-col-xs-12">
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title"><span class="Cf10000">*</span>商品名称</span><input type="text" class="form-controls" name="" placeholder="必填" value="" /></div>
									<div class="fb-box">
										<span class="title">商品分类</span>
										<div @click="itemize" class="form-controls bg-white">
											<span>{{classification}}</span>
											<i class="iconfont iconxiangxia"></i>
											<div class="list-ite" v-if="branch">
												<ul class="mp00">
													<li v-for="(item2,index2) in sort" :class="{active:item2.active}" :key="index2" @click="classify($event,item2.name,index2)" class="list-none">{{item2.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box">
										<span class="title">计量单位</span>
										<div @click="handSelect" class="form-controls bg-white">
											<span>{{checkSelcet}}</span>
											<i class="iconfont iconxiangxia"></i>
											<div class="list-ite" v-if="showSelcet">
												<ul class="mp00">
													<li v-for="(item,index) in selectList" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box">
										<span class="title">商品信息</span>
										<div class="cmdInformation">
											<div class="information">
												<span>新品上架</span>
											</div>
											<div class="information">
												<span>热卖推荐</span>
											</div>
											<div class="information">
												<span>清仓优惠</span>
											</div>
										</div>
									</div>
								</div>

								<div class="col-md-6 padding-0">

									<div class="fb-box">
										<span class="title">品牌</span>
										<div @click="transfer" class="form-controls bg-white">
											<span>{{transfer1}}</span>
											<i class="iconfont iconxiangxia"></i>
											<div class="list-ite" v-if="enteWarehouse">
												<ul class="mp00">
													<li v-for="(item1,index1) in selectList1" :class="{active:item1.active}" :key="index1" @click="checkSel1($event,item1.name,index1)" class="list-none">{{item1.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box"><span class="title">排序值</span><input type="text" class="form-controls" name="" placeholder="数字越大排名越靠前" value="" /></div>
									<div class="fb-box"><span class="title">搜索关键字</span><input type="text" class="form-controls" name="" value="" /></div>
								</div>
							</div>
						</div>
				</div>
				<!--商品规格-->
				<div class="Specifications">
					<div class="title mui-col-xs-12 ">商品规格</div>
					<div class="mui-col-xs-12">
						<table class="mui-col-xs-12 mt20 specifications">
							<thead>
								<tr>
									<th colspan="5" class="pde-table-head">
										<label class="">
											<span>设置商品多规格</span>
										</label>
									</th>
								</tr>
								<tr class="pde-setspec-title none-list">
									<th class="text-center"  >主图</th>
									<th class=""  colspan="">规格</th>
									<th class="indent">商品编码</th>
									<th class="indent" colspan="2">条形码</th>
								</tr>
							</thead>
							<tbody id="parameterFather" class="none-list">
								<tr class="ant-table-row none-list" v-for="(list, current) in goodsList" :key="current">
									<td class="mui-col-xs-1 text-center pic">
										 <img :src="list.titlepic" class="img-avatar">
  									 <input type="file" name="list.titlepic" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event,current)" ref="avatarInput" class="uppic">
									</td>
										<td class="padding10 mui-col-xs-2"><input class="pL10" type="text" name="" id="" :value="list.norms"></td>
									<td class="padding10 mui-col-xs-2"><input class="pL10" type="text" name="" id="" :value="list.code"></td>
									<td class="padding10 mui-col-xs-6"><input class="pL10" type="text" name="" id="" :value="list.barCode"></td>
									<td class="padding10 mui-col-xs-1 text-center" v-on:click="deleteNode(current)">{{list.delete}}</td>
								</tr>
							</tbody>
							<tfoot class="none-list">
								<tr class="pde-setspec-add">
									<td class="mui-col-xs-1 indent" colspan="5">
										<div id="btnAdd" @click="btnAdd()" class="btn-setspec iconfont icon-jia1 fs30 mL40 disPlayB"><span class="fs16 C6f6f6f">添加规格</span></div>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
					<div class="mt30 mui-col-xs-12">
							<div class="title mui-col-xs-12 mB20">图片上传</div>
							<div class="">
								<input type="hidden" name="slide_show" class="multiple_show_img" value="">
								<div class="layui-form-item">
									<div class="layui-upload">
										<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
											<div class="layui-upload-list" id="div-slide_show">
													<div type="button" class="layui-btn btn-pic" id="multiple_img_upload">
														<img src="img/chong.png"/>
													</div>
											</div>
										</blockquote>
									</div>
								</div>
							</div>
						</div>
				</div>
				<div class="mui-col-xs-12">
					<div class="title mui-col-xs-12 mB20">商品描述</div>
					<div id="editor">
			        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
			    </div>
				</div>
				<div class="mui-col-xs-12 mt20">
					<div class="title mui-col-xs-12 mB20">商品附件</div>
					<div class="manfujian">
						<div class="layui-upload item-right">
							<div>
								<div id="testList" class="iconfont icon-iconfontfujian uploadFile mR0 mt0">
								<!--<input accept="text/plain,image/jpeg,image/x-png,image/gif,application/x-zip-compressed,application/msword,application/msexcel,application/pdf,application/vnd.ms-excel" type="file" name="" id="" value="">-->
							</div>
							（单个附件最大支持20M，支持格式：PDF、Word、Excel、Txt、JPG、PNG、GIF、RAR、ZIP）
							</div>
							<div class="layui-upload-list mui-col-xs-12">
								<table class="layui-table">
									<thead>
										<tr>
										</tr>
									</thead>
									<tbody id="demoList"></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="mui-col-xs-12 mt20">
					<div class="title mui-col-xs-12 mB20">价格设置<span class="fs12 C989696 mL5">说明：填写市场价将根据客户默认级别折扣自动计算客户级别订货价</span></div>
					<div class="mui-col-xs-12 ">
							<div class="fb-box mui-col-xs-12 mB10">
								<span class="C989696 fs16 left LH30 mui-col-xs-1">市场价</span>
									<input type="text" class="form-controls mui-col-xs-4 mL20 pL10" name="" placeholder="0" value="" />
							</div>
							<div class="fb-box mui-col-xs-12 mB10">
								<span class="C989696 fs16 left LH30 mui-col-xs-1">参考成本价</span>
									<input type="text" class="form-controls mui-col-xs-4 mL20 pL10" name="" placeholder="建议填写，以获得初始库存成本价" value="" />
							</div>
					</div>
				</div>
				<div class="mui-col-xs-12">
						<table class="mui-col-xs-12 mt20 specifications">
							<thead>
								<tr>
									<th colspan="5" class="pde-table-head">
										<label class="">
											<span>按经销商级别定价</span>
										</label>
									</th>
								</tr>
								<tr class="pde-setspec-title none-list">
									<th class="text-center "  >经销商级别</th>
									<th class="indent borderL"  colspan="">	默认折扣</th>
									<th class="indent borderL">允许订货</th>
									<th class="indent borderL">订货价</th>
									<th class="indent borderL">起订量</th>
								</tr>
							</thead>
							<tbody id="parameterFather" class="none-list">
								<tr class="ant-table-row none-list height40" >
									<td class="mui-col-xs-1 text-center height40">普通</td>
									<td class="padding5 mui-col-xs-2 height40">100%</td>
									<td class="padding5 mui-col-xs-2 height40 layui-form text-center"><input type="checkbox" name="like1[read]" lay-skin="primary"></td>
									<td class="padding5 mui-col-xs-3 height40"><input class="pL10" type="text" name="" id="" ></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
								</tr>
								<tr class="ant-table-row none-list height40" >
									<td class="mui-col-xs-1 text-center height40">待签代理	</td>
									<td class="padding5 mui-col-xs-2 height40">100%</td>
									<td class="padding5 mui-col-xs-2 height40 layui-form text-center"><input type="checkbox" name="like1[read]" lay-skin="primary"></td>
									<td class="padding5 mui-col-xs-3 height40"><input class="pL10" type="text" name="" id="" ></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
								</tr>
								<tr class="ant-table-row none-list height40" >
									<td class="mui-col-xs-1 text-center height40">三级代理</td>
									<td class="padding5 mui-col-xs-2 height40">100%</td>
									<td class="padding5 mui-col-xs-2 height40 layui-form text-center"><input type="checkbox" name="like1[read]" lay-skin="primary"></td>
									<td class="padding5 mui-col-xs-3 height40"><input class="pL10" type="text" name="" id="" ></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
								</tr>
								<tr class="ant-table-row none-list height40" >
									<td class="mui-col-xs-1 text-center height40">二级代理	</td>
									<td class="padding5 mui-col-xs-2 height40">100%</td>
									<td class="padding5 mui-col-xs-2 height40 layui-form text-center"><input type="checkbox" name="like1[read]" lay-skin="primary"></td>
									<td class="padding5 mui-col-xs-3 height40"><input class="pL10" type="text" name="" id="" ></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
								</tr>
								<tr class="ant-table-row none-list height40" >
									<td class="mui-col-xs-1 text-center height40">一级代理	</td>
									<td class="padding5 mui-col-xs-2 height40">100%</td>
									<td class="padding5 mui-col-xs-2 height40 layui-form text-center"><input type="checkbox" name="like1[read]" lay-skin="primary"></td>
									<td class="padding5 mui-col-xs-3 height40"><input class="pL10" type="text" name="" id="" ></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="mui-col-xs-12 ">
						<table class="mui-col-xs-12 specifications">
							<thead>
								<tr>
									<th colspan="6" class="pde-table-head">
										<label class="">
											<span>按经销商定价</span>
										</label>
									</th>
								</tr>
								<tr class="pde-setspec-title none-list">
									<th class="text-center "  ></th>
									<th class="indent borderL"  colspan="">经销商名称</th>
									<th class="indent borderL">经销商级别</th>
									<th class="indent borderL">允许订货</th>
									<th class="indent borderL">订货价</th>
									<th class="indent borderL">起订量</th>
								</tr>
							</thead>
							<tbody id="parameterFather" class="none-list">
								<tr class="ant-table-row none-list height40"  v-for="(commodity, goods) in Distribution" :key="goods">
									<td class="mui-col-xs-1 ccc text-center height40">
										<i class="operation" @click="addTo()">+</i>
										<i class="operation LH30" @click="reduce(goods)">-</i>
									</td>
									<td class="padding5 mui-col-xs-3 height40 layui-form searchBox">
										<input class="pL10" type="text" v-model="commodity.value" @click="searchText(goods)" @blur.stop="changeCount($event)">
										<div class="searchList" v-if="searchList == goods">
											<ul>
												<li v-for="(factory, directory) in FACname" :key="directory" @click="Obtain($event,factory.name,goods)">{{factory.name}}</li>
											</ul>
										</div>
									</td>
									<td class="padding5 mui-col-xs-1 height40 text-center">{{commodity.level}}</td>
									<td class="padding5 mui-col-xs-1 height40  text-center"><input type="checkbox" lay-skin="primary" checked="checked"/></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
									<td class="padding5 mui-col-xs-3 height40 text-center" ><input class="pL10" type="text" name="" id="" ></td>
								</tr>
							</tbody>
						</table>
					</div>
				<div class="footer-buttom" style="bottom: 0;">
					<button  class="closegjss" type="button">取消</button>
					<button type="button">确定</button>
				</div>
				</form>
			</div>
			<!--修改-->
			<div id="modify">
				<div class="form-box">
					<div class="mui-col-xs-12 padding-0">
						<div class="fb-box"><span class="title">库存上限</span><input type="text" class="form-controls" name="" id="" value="" /></div>
						<div class="fb-box"><span class="title">库存下限</span><input type="text" class="form-controls" name="" id="" value="" /></div>
					</div>
				</div>
			</div>
			</div>
			
			<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" src="js/main.js" ></script>
			<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" src="js/wangEditor.js" ></script>
			<script type="text/javascript">
				//确认批量删除商品
				var vm = new Vue({
					el: ".gs-box1",
					data: {
						 dialogImageUrl: '',
        		dialogVisible: false,
						base64Url: "",
						checkSelcet: "请选择",
						transfer1: "请选择",
						classification: "请选择",
						showSelcet: false,
						enteWarehouse: false,
						branch: false,
						searchList:-1,
						FACname:[
						{
							name:"老干妈"
						},
						{
							name:"海绵宝宝"
						},
						{
							name:"炸洋芋"
						}
						],
						selectList: [{
								name: "辆",
								value: "1"
							},
							{
								name: "盒",
								value: "2"
							},
							{
								name: "袋",
								value: "3"
							},
							{
								name: "本",
								value: "4"
							},
						],
						selectList1: [{
								name: "羽合",
								value: "1"
							},
							{
								name: "西门子",
								value: "2"
							},
							{
								name: "敷轻松",
								value: "3"
							},
						],
						sort: [{
								name: "食品饮料",
								value: "1"
							},
							{
								name: "个护化妆",
								value: "2"
							},
							{
								name: "家居家纺",
								value: "3"
							},
						],
						goodsList:[//规格数据
						{
							titlepic:'img/001.png',
							picture:"",
							norms:"件",
							code:"P6354062172",
							barCode:"097364759",
							delete:'删除'
						},
					],
					Distribution:[{
						level:"普通",
						value:""
							}]
					},
					methods: {
						
						Obtain(e,value,index){
							this.Distribution[index].value = value;
							this.searchList=-1
						},
						changeCount(e,value,index){
							setInterval(() => { 
				           	this.searchList=-1
				        }, 1000)
 							},
						btnAdd(){//增加一个列表
							this.goodsList.push({
								titlepic:'img/01010.png',
								picture:'',
								norms:'',
								code:'',
								barCode:'',
								delete:'删除'
							});
						},
						addTo(){//增加一个列表
							this.Distribution.push({
								level:"一级代理",
								value:""
							});
						},
						searchText(index){
								this.searchList= index;
						},
						changeImage(current,index){
							var file = current.target.files[0]
							var reader = new FileReader()
							var that = this
							reader.readAsDataURL(file)
							reader.onload = function(current) {
							that.goodsList[index].titlepic = this.result
							}
						},
						deleteNode(current) {
						this.goodsList.splice(current, 1); //删除index为i,位置的数组元素
					},
						reduce(reduce) {
						this.Distribution.splice(reduce, 1); //删除index为i,位置的数组元素
					},
//						closegjss() { //隐藏高级搜索
//							$(".advanced-search-model").addClass("hidden")
//						},
						handSelect() {
							if(this.showSelcet) {
								this.showSelcet = false;
							} else {
								this.showSelcet = true;
							}
						},
						itemize() {
							if(this.branch) {
								this.branch = false;
							} else {
								this.branch = true;
							}
						},
						transfer() {
							if(this.enteWarehouse) {
								this.enteWarehouse = false;
							} else {
								this.enteWarehouse = true;
							}
						},
						checkSel(e, title, index) {
							this.checkSelcet = title;
							for(let i = 0; i < this.selectList.length; i++) {
								if(i == index) {
									this.selectList[i].active = true;
								} else {
									this.selectList[i].active = false;
								}
							}
						},
						checkSel1(e, title, index1) {
							this.transfer1 = title;
							for(let i = 0; i < this.selectList1.length; i++) {
								if(i == index1) {
									this.selectList1[i].active = true;
								} else {
									this.selectList1[i].active = false;
								}
							}
						},
						classify(e, title, index2) {
							this.classification = title;
							for(let i = 0; i < this.sort.length; i++) {
								if(i == index2) {
									this.sort[i].active = true;
								} else {
									this.sort[i].active = false;
								}
							}
						}

					}

				})

				layui.use(['form', 'table', 'laydate', 'element'], function() {
					var table = layui.table,
						laydate = layui.laydate,
						form = layui.form,
						element = layui.element

				});
				//商品信息样式切换
				$(".information").click(function() {
					$(this).toggleClass("goods");
				})
				$(".goods_active").click(function() {
					$(this).toggleClass("disPlay");
				})
				//图片上传
				var multiple_images = [];
				var picSize=0
			layui.use('upload', function() {
				var upload = layui.upload;
				
				//多图片上传
				upload.render({
					elem: '#multiple_img_upload',
					url: 'upload',
					multiple: true,
					before: function(obj) {
						if(picSize>20){
							alert("最多上传20张")
							return
						}
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#div-slide_show').append('<div class="slide_show">'+
								'<img src="' + result + '" alt="' + file.name +'"title="点击删除" class="layui-upload-img upload-img" >'+
									'<div class="deletePic">'+
										'<i class="iconfont iconiconfontshanchu" onclick="delMultipleImgs(this)"></i>'+
									'</div>'+
								'</div>')
							picSize++
						});
					},
				});

			});

			//单击图片删除图片 【注册全局函数】
			function delMultipleImgs(this_img) {
				//获取下标
				var subscript = $(".slide_show").index();
				//删除图片
				$(this_img).parent().parent().remove()
				picSize--;
				//删除数组
				multiple_images.splice(subscript, 1);
				//重新排序
				multiple_images.sort();
				$('.multiple_show_img').val(multiple_images);
				//console.log("multiple_images",multiple_images);
				//返回
				return;
			}
			
			//添加附件
			layui.use('upload', function() {
				var $ = layui.jquery,
				upload = layui.upload;
				//多文件列表示例
				var demoListView = $('#demoList'),
					uploadListIns = upload.render({
						elem: '#testList',
						url: '/upload/',
						accept: 'file',
						multiple: true,
						auto: false,
						// bindAction: '#testListAction',
						choose: function(obj) {
							var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
							//读取本地文件
							obj.preview(function(index, file, result) {
								var tr = $(['<tr class="borderBd1" id="upload-' + index + '">','<td  class="iconfont iconicon_tupian-mian mR10 border0 left">' + file.name + '</td>',  '<td class="border0 left">',
									'<button class="layui-btn-xs bc_f C000 demo-delete ">删除</button>', '</td>', '</tr>'
								].join(''));

								//单个重传
								tr.find('.demo-reload').on('click', function() {
									obj.upload(index, file);
								});

								//删除
								tr.find('.demo-delete').on('click', function() {
									delete files[index]; //删除对应的文件
									tr.remove();
									uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
								});

								demoListView.append(tr);
							});
						},
						done: function(res, index, upload) {
							if (res.code == 0) { //上传成功
								var tr = demoListView.find('tr#upload-' + index),
									tds = tr.children();
								tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
								tds.eq(3).html(''); //清空操作
								return delete this.files[index]; //删除文件队列已经上传成功的文件
							}
							this.error(index, upload);
						},
						error: function(index, upload) {
							var tr = demoListView.find('tr#upload-' + index),
								tds = tr.children();
							tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
							tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
						}
					});
				})
			//富文本编辑器
        var E = window.wangEditor
        var editor = new E('#editor')
        editor.customConfig.menus = [
        'head',  // 标题
		    'bold',  // 粗体
		     'undo',  // 撤销
		     'redo',  // 重复
		    'fontSize',  // 字号
		    'fontName',  // 字体
		    'italic',  // 斜体
		    'underline',  // 下划线
		    'strikeThrough',  // 删除线
		    'foreColor',  // 文字颜色
		    'backColor',  // 背景颜色
		    'list',  // 列表
		    'justify',  // 对齐方式
		    'quote',  // 引用
		    'emoticon',  // 表情
		    'image',  // 插入图片
		    'table',  // 表格
    ]
		    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
		    editor.create()
			</script>
	</body>

</html>